<template>
	<view class="goods">
		<view class="goods-top">
			<view class="img">
				<image :src="title" mode=""></image>
			</view>
			<view class="img-font">
				今日疯抢
			</view>
		</view>
		<view class="goods-font">
			<view class="font1">
				{{title1}}
			</view>
			<view class="font2">
				{{title2}}
			</view>
			<view class="font3">
				<view class="font3-content">
					{{title3}}
				</view>
				<view class="slot1">
					<slot name="t1"></slot>
				</view>
				<view class="slot2">
					<slot name="t2"></slot>
				</view>
			</view>
			<view class="font4">
				<view class="font4-content">
					<span>￥{{title4}}</span>{{title5}}
				</view>
				<view class="btn">
					<u-icon name="plus-circle-fill" color="#6ac492" size="52"></u-icon>
				</view>
			</view>
		</view>
		<!-- 		{{title}}
		{{title1}}
		{{title2}}
		{{title3}}
		{{title4}}
		{{title5}} -->
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			title1: String,
			title2: String,
			title3: String,
			title4: String,
			title5: String,
		},
		name: "goods",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.goods {
		background-color: #fff;
		width: 100%;
		border-radius: 10px;

		.goods-top {
			position: relative;
			box-shadow: 0 5px 0 0 #ededed;
			border-radius: 10px;

			.img {
				width: 80%;
				margin: auto;
				padding-top: 20px;

				image {
					width: 100%;
					height: 200rpx;
				}
			}

			.img-font {
				position: absolute;
				top: 0;
				background: linear-gradient(to right, #e9b284, #e87c56);
				color: #fff;
				font-weight: bold;
				height: 60rpx;
				line-height: 60rpx;
				width: 140rpx;
				text-align: center;
				border-top-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}
		}

		.goods-font {
			width: 90%;
			margin: auto;
			margin-top: 15px;

			.font1 {
				font-size: 13px;
				font-weight: bold;
			}

			.font2 {
				font-size: 10px;
				color: #acacac;
				margin-top: 5px;
			}

			.font3 {
				display: flex;
				margin-top: 10px;

				.font3-content {
					color: #f1a875;
					font-size: 10px;
					border: 1px solid #f1a875;
					width: 50px;
					height: 20px;
					line-height: 20px;
					text-align: center;
					margin-right: 5px;
				}

				.slot1 {
					font-size: 10px;
					border: 1px solid #72cb95;
					color: #fff;
					background-color: #4fbf7b;
					height: 20px;
					line-height: 20px;
					width: 20px;
					text-align: center;
				}

				.slot2 {
					font-size: 10px;
					height: 20px;
					line-height: 20px;
					width: 40px;
					text-align: center;
					border: 1px solid #8bd4a7;
					color: #8bd4a7;
				}
			}

			.font4 {
				display: flex;
				justify-content: space-between;
				margin-top: 5px;
				position: relative;
				.font4-content {
					color: #c2c2c2;

					span {
						color: #ee8c48;
						font-weight: bold;
					}
				}

				.btn {
					position: absolute;
					bottom: 15rpx;
					right: 1rpx;
				}
			}
		}
	}
</style>